<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Qt Creator,">










<meta name="description" content="Qt是一个跨平台的c++图形用户界面应用程序框架。 窗口部件">
<meta name="keywords" content="Qt Creator">
<meta property="og:type" content="article">
<meta property="og:title" content="QtCreator学习（1）">
<meta property="og:url" content="http://Anzusen.com/2019/04/28/QtCreator学习（1）/index.html">
<meta property="og:site_name" content="Anzhusen">
<meta property="og:description" content="Qt是一个跨平台的c++图形用户界面应用程序框架。 窗口部件">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://anzusen.com/image/QWidget_class_tree.png">
<meta property="og:image" content="http://anzusen.com/image/mywidget1.png">
<meta property="og:image" content="http://anzusen.com/image/widget_buju.png">
<meta property="og:image" content="http://anzusen.com/image/duandian.png">
<meta property="og:image" content="http://anzusen.com/image/mydialog5_jiemian.png">
<meta property="og:image" content="http://anzusen.com/image/colordialog.png">
<meta property="og:image" content="http://anzusen.com/image/filedialog.png">
<meta property="og:image" content="http://anzusen.com/image/fontdialog.png">
<meta property="og:image" content="http://anzusen.com/image/guid1.png">
<meta property="og:image" content="http://anzusen.com/image/guid2.png">
<meta property="og:image" content="http://anzusen.com/image/guid3.png">
<meta property="og:image" content="http://anzusen.com/image/qframe_shape.png">
<meta property="og:image" content="http://anzusen.com/image/qframe_result.png">
<meta property="og:image" content="http://anzusen.com/image/frame_run.png">
<meta property="og:image" content="http://anzusen.com/image/button_result.png">
<meta property="og:image" content="http://anzusen.com/image/lineedit_yanma.png">
<meta property="og:image" content="http://anzusen.com/image/lineEdit_result.png">
<meta property="og:image" content="http://anzusen.com/image/datetime_result.png">
<meta property="og:image" content="http://anzusen.com/image/slider_result.png">
<meta property="og:updated_time" content="2020-04-06T13:21:59.532Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="QtCreator学习（1）">
<meta name="twitter:description" content="Qt是一个跨平台的c++图形用户界面应用程序框架。 窗口部件">
<meta name="twitter:image" content="http://anzusen.com/image/QWidget_class_tree.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://Anzusen.com/2019/04/28/QtCreator学习（1）/">





  <title>QtCreator学习（1） | Anzhusen</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>
    <a href="https://github.com/ananzhusen/ananzhusen.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Anzhusen</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br>
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://Anzusen.com/2019/04/28/QtCreator学习（1）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="ananzhusen">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/touxiang.JPG">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Anzhusen">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">QtCreator学习（1）</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-04-28T14:37:07+08:00">
                2019-04-28
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/QT界面/" itemprop="url" rel="index">
                    <span itemprop="name">QT界面</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/04/28/QtCreator学习（1）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/04/28/QtCreator学习（1）/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv">本文总阅读量 <i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>次
            </span>
          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  8.9k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  35
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>Qt是一个跨平台的c++图形用户界面应用程序框架。</p>
<h3 id="窗口部件"><a href="#窗口部件" class="headerlink" title="窗口部件"></a>窗口部件</h3><a id="more"></a>
<h4 id="基础窗口部件QWidget"><a href="#基础窗口部件QWidget" class="headerlink" title="基础窗口部件QWidget"></a>基础窗口部件QWidget</h4><p><img src="/image/QWidget_class_tree.png" alt="QWidget类关系图"></p>
<h5 id="窗口、子部件以及窗口类型"><a href="#窗口、子部件以及窗口类型" class="headerlink" title="窗口、子部件以及窗口类型"></a>窗口、子部件以及窗口类型</h5><p>QWidget类是所有用户界面对象的基类</p>
<p>打开Qt Creator，新建空的qmake项目,项目名为mywidget1，完成后在mywidget1.pro中添加<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">QT+=widgets</span><br></pre></td></tr></table></figure></p>
<p>然后在项目中添加C++源文件main.cpp，添加以下代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//包含QApplication,QWidget等</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QtWidgets&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">(<span class="keyword">int</span> argc,<span class="keyword">char</span> *argv[])</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function">QApplication <span class="title">a</span><span class="params">(argc,argv)</span></span>;</span><br><span class="line">    <span class="comment">//新建Qwidget类对象，默认parent参数是0，所以他是一个窗口</span></span><br><span class="line">    QWidget *widget=<span class="keyword">new</span> QWidget();</span><br><span class="line">    <span class="comment">//设置窗口标题</span></span><br><span class="line">    widget-&gt;setWindowTitle(QObject::tr(<span class="string">"我是widget"</span>));</span><br><span class="line">    <span class="comment">//新建Qlabel对象,也是一个窗口</span></span><br><span class="line">    QLabel *label=<span class="keyword">new</span> QLabel();</span><br><span class="line">    label-&gt;setWindowTitle(QObject::tr(<span class="string">"我是label"</span>));</span><br><span class="line">    <span class="comment">//设置显示文本</span></span><br><span class="line">    label-&gt;setText(QObject::tr(<span class="string">"label：我是一个窗口"</span>));</span><br><span class="line">    <span class="comment">//改变部件大小，以便能显示出完整的内容</span></span><br><span class="line">    label-&gt;resize(<span class="number">380</span>,<span class="number">200</span>);</span><br><span class="line">    <span class="comment">//指定了父窗口为widget，所以不是窗口</span></span><br><span class="line">    QLabel *label2= <span class="keyword">new</span> QLabel(widget);</span><br><span class="line">    label2-&gt;setText(QObject::tr(<span class="string">"label2:我不是独立窗口，只是widget的子部件"</span>));</span><br><span class="line">    label2-&gt;resize(<span class="number">450</span>,<span class="number">200</span>);</span><br><span class="line">    <span class="comment">//在屏幕上显示</span></span><br><span class="line">    label-&gt;show();</span><br><span class="line">    widget-&gt;show();</span><br><span class="line">    <span class="keyword">int</span> ret =a.exec();</span><br><span class="line">    <span class="keyword">delete</span> label;</span><br><span class="line">    <span class="comment">//QT销毁父对象时会自动销毁子对象</span></span><br><span class="line">    <span class="keyword">delete</span> widget;</span><br><span class="line">    <span class="keyword">return</span> ret;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>运行结果：</p>
<p><img src="/image/mywidget1.png" alt="mywidget1运行结果"></p>
<p><strong>注意</strong>：这里使用new操作符为label2分配了空间，但是并没有使用delete进行释放，这是应为在Qt中销毁父对象的时候会自动销毁子对象，这里label2指定了parent为widget</p>
<p>QWidget的构造函数有两个参数：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//parent表示父窗口部件，默认为0，表示没有父窗口，后面的参数是	Qt::WindowType枚举类型</span></span><br><span class="line"><span class="comment">//用来指定各种窗口系统属性，f=0表示窗口类型值为Qt::Widget,这种类型的部件如果有父窗口，</span></span><br><span class="line"><span class="comment">//那么他就是子部件，否则就是独立窗口.</span></span><br><span class="line">QWidget(QWidget*parent = <span class="number">0</span>,Qt::WindowFlags f=<span class="number">0</span>)</span><br></pre></td></tr></table></figure></p>
<p>修改创建对象的两行代码为，运行程序查看效果：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">QWidget *widget=<span class="keyword">new</span> QWidget(<span class="number">0</span>,Qt::Dialog);</span><br><span class="line">QLabel *label=<span class="keyword">new</span> QLabel(<span class="number">0</span>,Qt::SplashScreen);</span><br></pre></td></tr></table></figure></p>
<p>再次更改：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">QWidget *widget=<span class="keyword">new</span> QWidget(<span class="number">0</span>,Qt::Dialog|Qt::FramelessWindowHint);</span><br><span class="line"><span class="comment">//label窗口一直在“图层”最上面</span></span><br><span class="line">QLabel *label=<span class="keyword">new</span> QLabel(<span class="number">0</span>,Qt::SplashScreen|Qt::WindowStaysOnTopHint);</span><br></pre></td></tr></table></figure></p>
<p>说明：更多的f参数的使用,可以在帮助中索引Qt::WindowFlags关键字</p>
<h5 id="窗口几何布局"><a href="#窗口几何布局" class="headerlink" title="窗口几何布局"></a>窗口几何布局</h5><p>窗口的大小和位置，根据是否包含边框和标题栏两种情况，要用不同的函数来获取。<br>可以在帮助索引中查看 Window and Dialog Widgets 关键字</p>
<p><img src="/image/widget_buju.png" alt="窗口几何布局"></p>
<p>这里的函数分为两类：</p>
<ul>
<li>包含框架：x()、y()、frameGeometry()、pos()、move()等函数</li>
<li>不包含框架：geometry()、width（）、height()、rect()、size()等函数</li>
</ul>
<h5 id="程序调试"><a href="#程序调试" class="headerlink" title="程序调试"></a>程序调试</h5><p>这部分内容可以在帮助索引中通过Interacting with the Debugger 和Debugging a C++Example Application关键字查看</p>
<h6 id="设置断点"><a href="#设置断点" class="headerlink" title="设置断点"></a>设置断点</h6><p>创建mywidght2项目，主函数内容为：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QApplication&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QWidget&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">(<span class="keyword">int</span> argc,<span class="keyword">char</span> *argv[])</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function">QApplication <span class="title">a</span><span class="params">(argc,argv)</span></span>;</span><br><span class="line"></span><br><span class="line">    QWidget widget;</span><br><span class="line">    <span class="keyword">int</span> x=widget.x();</span><br><span class="line">    <span class="keyword">int</span> y=widget.y();</span><br><span class="line">    <span class="comment">//QRect类型返回数据为：（x,y,宽，高）</span></span><br><span class="line">    QRect geometry =widget.geometry();</span><br><span class="line">    QRect frame =widget.frameGeometry();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> a.exec();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>在一行代码前面单击来设置断点，取消再单击一下，如图：</p>
<p><img src="/image/duandian.png" alt="设置断点运行"></p>
<p>单步调试–&gt;快捷键F11。</p>
<h6 id="使用qDebug-函数"><a href="#使用qDebug-函数" class="headerlink" title="使用qDebug()函数"></a>使用qDebug()函数</h6><p>更改上面的程序：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QApplication&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QWidget&gt;</span></span></span><br><span class="line"><span class="comment">//使用qDebug（）函数要添加#include&lt;QDebug&gt;头文件</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDebug&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">(<span class="keyword">int</span> argc,<span class="keyword">char</span> *argv[])</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function">QApplication <span class="title">a</span><span class="params">(argc,argv)</span></span>;</span><br><span class="line"></span><br><span class="line">    QWidget widget;</span><br><span class="line">    widget.resize(<span class="number">400</span>,<span class="number">300</span>);  <span class="comment">//窗口大小</span></span><br><span class="line">    widget.move(<span class="number">200</span>,<span class="number">100</span>);    <span class="comment">//窗口位置</span></span><br><span class="line">    widget.show();</span><br><span class="line">    <span class="keyword">int</span> x=widget.x();</span><br><span class="line">    qDebug(<span class="string">"x:%d"</span>,x);</span><br><span class="line">    <span class="keyword">int</span> y=widget.y();</span><br><span class="line">    qDebug(<span class="string">"y:%d"</span>,y);</span><br><span class="line">    QRect geometry =widget.geometry();</span><br><span class="line">    QRect frame =widget.frameGeometry();</span><br><span class="line">    qDebug()&lt;&lt;<span class="string">"geometry:"</span>&lt;&lt;geometry&lt;&lt;<span class="string">"frame:"</span>&lt;&lt;frame;</span><br><span class="line">    qDebug()&lt;&lt;<span class="string">"pos:"</span>&lt;&lt;widget.pos()&lt;&lt;<span class="built_in">endl</span>&lt;&lt;<span class="string">"rect:"</span>&lt;&lt;widget.rect()</span><br><span class="line">           &lt;&lt;<span class="built_in">endl</span>&lt;&lt;<span class="string">"size:"</span>&lt;&lt;widget.size()&lt;&lt;<span class="built_in">endl</span>&lt;&lt;<span class="string">"width:"</span>&lt;&lt;widget.width()</span><br><span class="line">          &lt;&lt;<span class="built_in">endl</span>&lt;&lt;<span class="string">"height:"</span>&lt;&lt;widget.height();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> a.exec();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>运行结果：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Starting D:\QT\03\3-02\build-mywidget2-Desktop_Qt_5_6_0_MinGW_32bit-Debug\debug\mywidget2.exe...</span><br><span class="line">x:200</span><br><span class="line">y:100</span><br><span class="line">geometry: QRect(211,145 400x300) frame: QRect(200,100 422x356)</span><br><span class="line">pos: QPoint(200,100) </span><br><span class="line">rect: QRect(0,0 400x300) </span><br><span class="line">size: QSize(400, 300) </span><br><span class="line">width: 400 </span><br><span class="line">height: 300</span><br></pre></td></tr></table></figure></p>
<h4 id="对话框QDialog"><a href="#对话框QDialog" class="headerlink" title="对话框QDialog"></a>对话框QDialog</h4><h5 id="模态和非模态对话框"><a href="#模态和非模态对话框" class="headerlink" title="模态和非模态对话框"></a>模态和非模态对话框</h5><p>索引关键字QDialog 和Dialog Windows<br>对话框分为两类：</p>
<ul>
<li>模态对话框：就是在没有关闭它之前不能再与同一个应用程序的其他窗口进行交互。</li>
<li>非模态对话框：既可以与它交互也可以与同一程序中的其他窗口交互。</li>
</ul>
<p>新建Qt Widgets应用，项目名称为mydialog1，基类选择QWidget,类名为MyWidget,然后在mywidget.cpp文件中添加一下代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">"mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">"ui_mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDialog&gt;</span></span></span><br><span class="line"></span><br><span class="line">MyWidget::MyWidget(QWidget *parent):</span><br><span class="line">    QWidget(parent),</span><br><span class="line">    ui(<span class="keyword">new</span> Ui::MyWidget)</span><br><span class="line">&#123;</span><br><span class="line">    ui-&gt;setupUi(<span class="keyword">this</span>);</span><br><span class="line">    <span class="function">QDialog <span class="title">dialog</span><span class="params">(<span class="keyword">this</span>)</span></span>;   <span class="comment">//父窗口为MyWidget类对象</span></span><br><span class="line">    dialog.show();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>运行程序发现dialog窗口一闪而过，只显示myWidget窗口了，是因为，dialog只在mywidget这个构造函数中有用，这个构造函数执行完了，dialog也就消失了。<br>解决办法：</p>
<ol>
<li>非模态对话框</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">QDialog *dialog =<span class="keyword">new</span> QDialog(<span class="keyword">this</span>);  <span class="comment">//创建一个对象，用new开辟内存空间</span></span><br><span class="line">dialog-&gt;show();</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>模态</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">QDialog <span class="title">dialog</span><span class="params">(<span class="keyword">this</span>)</span></span>;  </span><br><span class="line">   dialog.exec();</span><br></pre></td></tr></table></figure>
<p>运行程序，对话框弹出来，但MyWidget窗口并没有弹出，当关闭对话框后MyWidget才弹出来</p>
<ol start="3">
<li>模态</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">QDialog *dialog =<span class="keyword">new</span> QDialog(<span class="keyword">this</span>);  <span class="comment">//创建一个对象，用new开辟内存空间</span></span><br><span class="line">dialog-&gt;setModal(<span class="literal">true</span>);</span><br><span class="line">dialog-&gt;show();</span><br></pre></td></tr></table></figure>
<p>运行程序，两个对话框都显示出来，但只有在关闭对话框之后才能操作MyWidget窗口。</p>
<ul>
<li>setModal()函数默认设置是Qt::ApplicationModal.</li>
<li>setWindowModality()函数，它有一个参数来设置模态对话框要阻塞的窗口类型，可以是：<ul>
<li>Qt::NonModal(不阻塞任何窗口,就是非模态)、</li>
<li>Qt:: WindowModal(阻塞它的父窗口、所有祖先窗口以及它们的子窗ロ)</li>
<li>Qt: ApplicationModal(阻塞整个应用程序的所有窗口)。</li>
</ul>
</li>
</ul>
<h5 id="多窗口切换"><a href="#多窗口切换" class="headerlink" title="多窗口切换"></a>多窗口切换</h5><h6 id="信号和槽"><a href="#信号和槽" class="headerlink" title="信号和槽"></a>信号和槽</h6><p>新建Qt Widgets应用，项目名称为mydialog2，继承QWidget,双击mywidget. ui文件,在设计模式中往界面添加一个Label和一个PushButton,在属性栏中将PushButton的objectName改为showChildButton,然后更改Label 的显示文本为“我是主界面!”,更改按钮的显示文本为“显示子窗口”。然后回到编辑模式打开mywidget. h文件,在MyWidget类声明的最后添加槽的声明:<br>一、 手动关联</p>
<ol>
<li><p>定义槽</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> slots:</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">showChildDialog</span><span class="params">()</span></span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>到源文件中编写这个槽的实现代码</p>
</li>
</ol>
<p>Qt Creator设计了一个快速添加定义的方法:单击showChildDialog()槽,同时按下Alt+ Enter键(也可以在函数上右击,在弹出的级联菜单中选择Refactor 菜单项),会弹出“在mywidget. cpp添加定义”选项,再次按下回车键Enter,编辑器便会转到mywidget. cpp文件中,并且自动创建showChildDialog()槽的定义,只需要在其中添加代码即可。这种方法也适用于先在源文件中添加定义,然后自动在头文件中添加声明的情况。</p>
<p>添加代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"ui_mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDialog&gt;</span></span></span><br><span class="line"></span><br><span class="line">MyWidget::MyWidget(QWidget *parent) :</span><br><span class="line">    QWidget(parent),</span><br><span class="line">    ui(<span class="keyword">new</span> Ui::MyWidget)</span><br><span class="line">&#123;</span><br><span class="line">    ui-&gt;setupUi(<span class="keyword">this</span>);</span><br><span class="line">    <span class="comment">//添加代码</span></span><br><span class="line">    connect(ui-&gt;showChildButton,&amp;QPushButton::clicked,</span><br><span class="line">            <span class="keyword">this</span>,&amp;MyWidget::showChildDialog);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyWidget::~MyWidget()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">delete</span> ui;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> MyWidget::showChildDialog()</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">//添加代码</span></span><br><span class="line">    QDialog *dialog = <span class="keyword">new</span> QDialog(<span class="keyword">this</span>);</span><br><span class="line">    dialog-&gt;show();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>这里使用了connect( )函数将按钮的单击信号clicked() 与新建的槽进行关联。clicked( )信号在QPushButton类中定义，而connect()是QObject类中的函数,因为MyWidget类继承自QObject,所以可以直接使用它。<br><strong>connect()函数中的4个参数分别是发射信号的对象、发射的信号、接收信号的对象和要执行的槽。</strong></p>
<ol start="3">
<li>运行程序,然后单击主界面上的按钮就会弹出一个对话框。</li>
</ol>
<p>二、自动关联。<br>  自动关联就是将关联函数整合到槽命名中，比如前面的槽可以重命名为on_show-ChildButton_ clicked(), 就是由字符on、发射信号的部件对象名和信号名组成。这样就可以去掉connect()关联函数了,具体做法：</p>
<p>  打开mywidget. cpp文件,在MyWidget类的构造函数中删除connect()函数,然后更改showChildDialog()槽的名字,QtCreator中提供了一个快捷方式来更改所有该函数出现的地方,从而不再需要逐- -更改函数名。先在showChildDialog上右击，在弹出的级联菜单中选择Refactor- Rename Symbol Under Cursor,或者直接使用Ctrl+ Shift+ R快捷键,在出现的替换栏中输入on_ showChildButton_ clicked ,再单击Replace就可以了。这时源文件和头文件中相应的函数名都进行了更改。现在运行程序,和前面的效果是一样的。</p>
<p>源文件代码如下：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"ui_mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDialog&gt;</span></span></span><br><span class="line"></span><br><span class="line">MyWidget::MyWidget(QWidget *parent) :</span><br><span class="line">    QWidget(parent),</span><br><span class="line">    ui(<span class="keyword">new</span> Ui::MyWidget)</span><br><span class="line">&#123;</span><br><span class="line">    ui-&gt;setupUi(<span class="keyword">this</span>);</span><br><span class="line">    <span class="comment">//on_showChildButton_clicked();</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyWidget::~MyWidget()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">delete</span> ui;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> MyWidget::on_showChildButton_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    QDialog *dialog = <span class="keyword">new</span> QDialog(<span class="keyword">this</span>);</span><br><span class="line">    dialog-&gt;show();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h6 id="自定义对话框"><a href="#自定义对话框" class="headerlink" title="自定义对话框"></a>自定义对话框</h6><p>新建Qt Widgets应用，项目名称为mydialog3，继承QWidget.</p>
<ol>
<li><p>添加自定义对话类框。首先向该项目中添加Qt设计师界面类。界面模板选择Dialog without Buttons, 类名改为MyDialog。然后在设计模式中向窗口添加两个Push Button,并且分别更改其显示文本为“进入主界面”和“退出程序”。</p>
</li>
<li><p>设计信号和槽。</p>
</li>
</ol>
<ul>
<li>使用设计器来实现“退出程序”按钮的信号和槽的关联。<ul>
<li>单击设计器上方的Edit Signals/ Slots图标,或者按下快捷键F4,于是进入了部件的信号和槽的编辑模式。在“退出程序”按钮上按住鼠标左键，然后拖动到窗口界面上,这时松开鼠标左键。在弹出的配置连接对话框中选择“显示从QWidget继承的信号和槽”选项,然后在左边的QPushButton栏中选择信号clicked(),在右边的QDialog栏中选择对应的槽close(),完成后单击OK按钮.</li>
<li>要想取消这个关联,只须在信号和槽编辑模式中选择这个关联;当它变为红色时,按下Delete 键,或者右击选择“删除”。也可以在设计器下方的信号和槽编辑器中看到设置好的关联。</li>
<li>设置好关联后按下F3键,或者单击“编辑控件”图标,则回到部件编辑模式。</li>
<li>关于设计器中信号和槽的详细使用,可以在帮助索引中通过QtDesigner’sSignalsandSlotsEd-iting Mode关键字查看。</li>
<li></li>
</ul>
</li>
<li>现在设置“进人主界面”按钮的信号和槽的关联。<ul>
<li>在该按钮上右击,在弹出的级联菜单中选择“转到槽”，然后在弹出的对话框中选择clicked()信号,并单击OK按钮。这时便会进人代码编辑模式,并且定位到自动生成的on_pushButton_ clicked()槽中 。在其中添加代码:</li>
</ul>
</li>
</ul>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyDialog::on_pushButton_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    accept();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>说明：</strong>这个acceptO)函数是QDialog类中的一个槽,対于一个使用exec()函数实现的模态対话框,执行了这个槽就会隠藏这个模态対活框,并返回QDialog::Accepted值，这里里就是要使用这个值来判断是哪个按钮被按下了。与其对应的还有一个reject()槽，它可以返回一个QDialog::Rejected值,前面的“退出程序”按钮也可以关联这个槽。</p>
<h6 id="在主界面中使用自定义的对话框"><a href="#在主界面中使用自定义的对话框" class="headerlink" title="在主界面中使用自定义的对话框"></a>在主界面中使用自定义的对话框</h6><ol>
<li>更改main.cpp函数内容如下</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"mywidget.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QApplication&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">"mydialog.h"</span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">(<span class="keyword">int</span> argc, <span class="keyword">char</span> *argv[])</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function">QApplication <span class="title">a</span><span class="params">(argc, argv)</span></span>;</span><br><span class="line">    MyWidget w;</span><br><span class="line">    MyDialog dialog;</span><br><span class="line">    <span class="keyword">if</span>(dialog.exec()==QDialog::Accepted)&#123; <span class="comment">//判断dialog执行结果</span></span><br><span class="line">    w.show();   <span class="comment">//如果按下了“进入主界面”按钮，则显示主页面</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> a.exec();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>  主函数中建立MyDialog对象,然后判断其exec()函数的返回值,如果按下了“进人主界面”按钮,返回值应该是QDialog:: Accepted,则显示主界面,并且正常执行程序;如果不是,则直接退出程序。</p>
<p>  运行程序后可以发现,已经实现了从登录对话框到主界面,再从主界面显示一个对话框的应用了。再来实现可以从主界面重新进入登录界面的功能。双击mywidget. ui文件,在设计模式中再向界面添加两个Push Button,分别更改它们的显示文本为“重新登录”和“退出”。然后使用信号和槽模式将“退出”按钮的clicked()信号和MyWidget界面的close()槽关联。完成后再转到“重新登录”按钮的clicked()信号的槽，并更,改如下:</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//先关闭主界面，其实它是隐藏起来了，并没有退出</span></span><br><span class="line">    close();</span><br><span class="line">    <span class="comment">//新建MyDialog对象</span></span><br><span class="line">    MyDialog dlg;</span><br><span class="line">    <span class="comment">//如果按下了“进入主窗口“按钮，则再次显示主界面</span></span><br><span class="line">    <span class="comment">//否则，因为现在已经没有显示的界面了，所以程序将退出</span></span><br><span class="line">    <span class="keyword">if</span>(dlg.exec()==QDialog::Accepted)</span><br><span class="line">        show();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>说明：</strong>那个close()槽,它不一定使程序退出，只有当只剩下最后一个主界面了(就是没有父窗口的界面),这时调用close()槽,程序才会退出;而其他情况下界面只是隐藏起来了,并没有被销毁。这里还需要包含MyDialog类的头文件#include“mydialog. h” ,然后运行程序查看效果。</p>
<h5 id="标准对话框"><a href="#标准对话框" class="headerlink" title="标准对话框"></a>标准对话框</h5><p>新建Qt Widgets应用，项目名称为mydialog5，继承QWidget.<br>本节帮助索引Standard Dialogs关键字。<br>添加如图所示按钮：<br><img src="/image/mydialog5_jiemian.png" alt="按钮界面"></p>
<h6 id="颜色对话框"><a href="#颜色对话框" class="headerlink" title="颜色对话框"></a>颜色对话框</h6><ol>
<li><p>在mywidget.cpp文件中添加：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDebug&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QColorDialog&gt;</span></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>进入“颜色对话框”按钮的clicked()信号槽，用静态函数直接直接显示颜色对话框：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_clicked()</span><br><span class="line">&#123;</span><br><span class="line"><span class="comment">//参数分别是：设置初始颜色、指定父窗口、设置对话框标题</span></span><br><span class="line">    QColor color = QColorDialog::getColor(Qt::red,<span class="keyword">this</span>,tr(<span class="string">"颜色对话框"</span>));</span><br><span class="line">                                       <span class="comment">//,QColorDialog::ShowAlphaChannel);</span></span><br><span class="line">                                      <span class="comment">//添加透明度选项	1.0表示完全不透明，0.0表示完全透明</span></span><br><span class="line">    qDebug()&lt;&lt;<span class="string">"color:"</span>&lt;&lt;color;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>或者，创建一个对象：</p>
</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="function">QColorDialog <span class="title">dialog</span><span class="params">(Qt::red,<span class="keyword">this</span>)</span></span>;</span><br><span class="line">    dialog.setOption(QColorDialog::ShowAlphaChannel);<span class="comment">//显示透明度选项</span></span><br><span class="line">    								<span class="comment">//1.0表示完全不透明，0.0表示完全透明</span></span><br><span class="line">    dialog.exec();                                   <span class="comment">//模态方式运行对话框</span></span><br><span class="line">    QColor color = dialog.currentColor();            <span class="comment">//获取当前颜色</span></span><br><span class="line">    qDebug()&lt;&lt;<span class="string">"color:"</span>&lt;&lt;color;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>运行结果：<br><img src="/image/colordialog.png" alt="颜色对话框"></p>
<h6 id="文件对话框"><a href="#文件对话框" class="headerlink" title="文件对话框"></a>文件对话框</h6><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_2_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//参数分别是：指定父窗口、设置对话框标题、默认打开目录路径和设置文件类型过滤器</span></span><br><span class="line">    <span class="comment">//如果不指定过滤器则默认选择所有类型文件</span></span><br><span class="line">    <span class="comment">//同文件类型不同格式要用空格隔开，不同类型用“;;”隔开。</span></span><br><span class="line"><span class="comment">//    QString fileName=QFileDialog::getOpenFileName(this,tr("文件对话框"),</span></span><br><span class="line"><span class="comment">//                                                  "D:",tr("图片文件(*png *jpg);;文本文件(*txt)"));</span></span><br><span class="line"><span class="comment">//    qDebug()&lt;&lt;"fileName:"&lt;&lt;fileName;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//同时选择多个文件</span></span><br><span class="line">    QStringList fileNames=QFileDialog::getOpenFileNames(<span class="keyword">this</span>,tr(<span class="string">"文件对话框"</span>), <span class="string">"D:"</span>,tr(<span class="string">"图片文件(*png *jpg)"</span>));</span><br><span class="line">    qDebug()&lt;&lt;<span class="string">"fileNames:"</span>&lt;&lt;fileNames;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>其他函数：</p>
<ul>
<li>getSaveFileName()实现保存文件对话框和文件另存对话框</li>
<li>getExistingDirectory()获取一个已存在的文件夹路径</li>
</ul>
<p>运行结果：<br><img src="/image/filedialog.png" alt="文件对话框"></p>
<h6 id="字体对话框"><a href="#字体对话框" class="headerlink" title="字体对话框"></a>字体对话框</h6><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_3_clicked()</span><br><span class="line">&#123;</span><br><span class="line">	<span class="comment">//ok用于标记是否单击了ok按钮</span></span><br><span class="line">    <span class="keyword">bool</span> ok;</span><br><span class="line">    QFont font =QFontDialog::getFont(&amp;ok,<span class="keyword">this</span>);</span><br><span class="line">    <span class="keyword">if</span>(ok) ui-&gt;pushButton_3-&gt;setFont(font);</span><br><span class="line">    <span class="keyword">else</span> qDebug()&lt;&lt;tr(<span class="string">"没有选择字体！"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>运行结果：<br><img src="/image/fontdialog.png" alt="字体对话框"></p>
<h6 id="输入对话框"><a href="#输入对话框" class="headerlink" title="输入对话框"></a>输入对话框</h6><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_4_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">bool</span> ok;</span><br><span class="line">    <span class="comment">//指定父窗口、设置窗口标题、设置对话框中的标签显示文本、设置输入字符串的</span></span><br><span class="line">    <span class="comment">//显示模式(例如密码可以显示成小黑点,这里选择了显示用户输人的实际内容)、</span></span><br><span class="line">    <span class="comment">//设置输入框中的默认字符串和设置获取按下按钮信息的bool变量;</span></span><br><span class="line">    QString <span class="built_in">string</span> =QInputDialog::getText(<span class="keyword">this</span>,tr(<span class="string">"输入字符串对话框"</span>),</span><br><span class="line">                tr(<span class="string">"请输入用户名："</span>),QLineEdit::Normal,tr(<span class="string">"admin"</span>),&amp;ok);</span><br><span class="line">    <span class="keyword">if</span>(ok)qDebug()&lt;&lt;<span class="string">"string:"</span>&lt;&lt;<span class="built_in">string</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//其中的参数100表示默认的数值是100,一1000表示可输人的最小值是一1 000,</span></span><br><span class="line">    <span class="comment">//1000表示可输人的最大值是1000,10表示使用箭头按钮,数值每次变化10</span></span><br><span class="line">    <span class="keyword">int</span> value1=QInputDialog::getInt(<span class="keyword">this</span>,tr(<span class="string">"输入整数对话框"</span>),</span><br><span class="line">                tr(<span class="string">"请输入-1000到1000之间的数值"</span>),<span class="number">100</span>,<span class="number">-1000</span>,<span class="number">1000</span>,<span class="number">10</span>,&amp;ok);</span><br><span class="line">    <span class="keyword">if</span>(ok)qDebug()&lt;&lt;<span class="string">"value1:"</span>&lt;&lt;value1;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//参数2表示小数的位数为2</span></span><br><span class="line">    <span class="keyword">double</span> value2=QInputDialog::getDouble(<span class="keyword">this</span>,tr(<span class="string">"输入浮点数对话框"</span>),</span><br><span class="line">                tr(<span class="string">"请输入-1000到1000之间的数值"</span>),<span class="number">0.00</span>,<span class="number">-1000</span>,<span class="number">1000</span>,<span class="number">2</span>,&amp;ok);</span><br><span class="line">    <span class="keyword">if</span>(ok)qDebug()&lt;&lt;<span class="string">"value2:"</span>&lt;&lt;value2;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//参数0表示默认显示列表中的第0个条目(0就是第一个),参数true设置条目是否可以被更改.true就是可以被更改。</span></span><br><span class="line">    QStringList items;</span><br><span class="line">    items&lt;&lt;tr(<span class="string">"条目1"</span>)&lt;&lt;tr(<span class="string">"条目2"</span>);</span><br><span class="line">    QString item=QInputDialog::getItem(<span class="keyword">this</span>,tr(<span class="string">"输入条目对话框"</span>),</span><br><span class="line">                tr(<span class="string">"请选择或输入一个条目"</span>),items,<span class="number">0</span>,<span class="literal">true</span>,&amp;ok);</span><br><span class="line">    <span class="keyword">if</span>(ok)qDebug()&lt;&lt;<span class="string">"item:"</span>&lt;&lt;item;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h6 id="消息对话框"><a href="#消息对话框" class="headerlink" title="消息对话框"></a>消息对话框</h6><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_5_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//分别拥有不同的图标和提示音</span></span><br><span class="line">    <span class="comment">//参数：父窗口、标题栏、显示信息、拥有的按钮</span></span><br><span class="line">    <span class="keyword">int</span> ret1=QMessageBox::question(<span class="keyword">this</span>,tr(<span class="string">"问题对话框"</span>),</span><br><span class="line">                    tr(<span class="string">"你了解Qt吗？"</span>),QMessageBox::Yes,QMessageBox::No);</span><br><span class="line">    <span class="keyword">if</span>(ret1==QMessageBox::Yes)qDebug()&lt;&lt;tr(<span class="string">"问题！"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> ret2=QMessageBox::information(<span class="keyword">this</span>,tr(<span class="string">"提示对话框"</span>),</span><br><span class="line">                    tr(<span class="string">"这是Qt书籍！"</span>),QMessageBox::Ok);</span><br><span class="line">    <span class="keyword">if</span>(ret2==QMessageBox::Ok)qDebug()&lt;&lt;tr(<span class="string">"提示！"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> ret3=QMessageBox::warning(<span class="keyword">this</span>,tr(<span class="string">"警告对话框"</span>),</span><br><span class="line">                    tr(<span class="string">"不能提前结束？"</span>),QMessageBox::Abort);</span><br><span class="line">    <span class="keyword">if</span>(ret3==QMessageBox::Abort)qDebug()&lt;&lt;tr(<span class="string">"警告！"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> ret4=QMessageBox::critical(<span class="keyword">this</span>,tr(<span class="string">"严重错误对话框"</span>),</span><br><span class="line">                    tr(<span class="string">"发现一个严重错误！现在要关闭所有文件！"</span>),QMessageBox::YesAll);</span><br><span class="line">    <span class="keyword">if</span>(ret4==QMessageBox::YesAll)qDebug()&lt;&lt;tr(<span class="string">"错误！"</span>);</span><br><span class="line"></span><br><span class="line">    QMessageBox::about(<span class="keyword">this</span>,tr(<span class="string">"关于对话框"</span>),</span><br><span class="line">                    tr(<span class="string">"Qt及QtCreator"</span>));</span><br><span class="line">    QMessageBox::aboutQt(<span class="keyword">this</span>,tr(<span class="string">"关于qt"</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h6 id="进度条对话框"><a href="#进度条对话框" class="headerlink" title="进度条对话框"></a>进度条对话框</h6><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_6_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//参数：设置对话框的标签内容、取消按钮的显示文本、最小值、最大值和和父窗口</span></span><br><span class="line">    <span class="function">QProgressDialog <span class="title">dialog</span><span class="params">(tr(<span class="string">"文件复制进度"</span>),tr(<span class="string">"取消"</span>),<span class="number">0</span>,<span class="number">50000</span>,<span class="keyword">this</span>)</span></span>;</span><br><span class="line">    dialog.setWindowTitle(tr(<span class="string">"进度对话框"</span>));</span><br><span class="line">    dialog.setWindowModality(Qt::WindowModal); <span class="comment">//将对话框设置为模态</span></span><br><span class="line">    dialog.show();</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>;i&lt;<span class="number">50000</span>;i++)&#123;                  <span class="comment">//演示进度条</span></span><br><span class="line">        dialog.setValue(i);                    <span class="comment">//设置进度条当前值</span></span><br><span class="line">        QCoreApplication::processEvents();     <span class="comment">//避免界面冻结</span></span><br><span class="line">        <span class="keyword">if</span>(dialog.wasCanceled())<span class="keyword">break</span>;         <span class="comment">//按下取消按钮则中断</span></span><br><span class="line">    &#125;</span><br><span class="line">    dialog.setValue(<span class="number">50000</span>);    <span class="comment">//这样才能显示100%,因为for循环中少加一个数</span></span><br><span class="line">    qDebug()&lt;&lt;tr(<span class="string">"复制结束！"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h6 id="错误信息对话框"><a href="#错误信息对话框" class="headerlink" title="错误信息对话框"></a>错误信息对话框</h6><p>在mywidget.h文件中</p>
<ol>
<li>添加类前置声明</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">class QErrorMessage;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>添加私有对象：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">QErrorMessage *errordlg</span><br></pre></td></tr></table></figure>
<p>在mywidget.cpp中</p>
<ol>
<li><p>在构造函数中添加：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">errordlg = new QErrorMessage(this);</span><br></pre></td></tr></table></figure>
</li>
<li><p>添加槽信号</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_7_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    errordlg-&gt;setWindowTitle(tr(<span class="string">"错误信息对话框"</span>));</span><br><span class="line">    errordlg-&gt;showMessage(tr(<span class="string">"这里是出错信息！"</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h6 id="向导对话框"><a href="#向导对话框" class="headerlink" title="向导对话框"></a>向导对话框</h6><p>在mywidget.h文件中</p>
<ol>
<li><p>添加头文件</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QWizard&gt;</span></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在MyWidget类中添加private类型函数声明</p>
</li>
</ol>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">private</span>:</span><br><span class="line">    Ui::MyWidget *ui;</span><br><span class="line">    QErrorMessage *errordlg;</span><br><span class="line">    <span class="function">QWizardPage *<span class="title">createPage1</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="function">QWizardPage *<span class="title">createPage2</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="function">QWizardPage *<span class="title">createPage3</span><span class="params">()</span></span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>在mywidget.cpp中<br>添加：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">QWizardPage *MyWidget::createPage1()&#123;</span><br><span class="line">    QWizardPage *page =<span class="keyword">new</span> QWizardPage;</span><br><span class="line">    page-&gt;setTitle(tr(<span class="string">"介绍"</span>));</span><br><span class="line">    <span class="keyword">return</span> page;</span><br><span class="line">&#125;</span><br><span class="line">QWizardPage *MyWidget::createPage2()&#123;</span><br><span class="line">    QWizardPage *page =<span class="keyword">new</span> QWizardPage;</span><br><span class="line">    page-&gt;setTitle(tr(<span class="string">"用户选择信息"</span>));</span><br><span class="line">    <span class="keyword">return</span> page;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">QWizardPage *MyWidget::createPage3()&#123;</span><br><span class="line">    QWizardPage *page =<span class="keyword">new</span> QWizardPage;</span><br><span class="line">    page-&gt;setTitle(tr(<span class="string">"结束"</span>));</span><br><span class="line">    <span class="keyword">return</span> page;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//右击设置槽函数</span></span><br><span class="line"><span class="keyword">void</span> MyWidget::on_pushButton_8_clicked()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="function">QWizard <span class="title">wizard</span><span class="params">(<span class="keyword">this</span>)</span></span>;</span><br><span class="line">    wizard.setWindowTitle(tr(<span class="string">"向导对话框"</span>));</span><br><span class="line">    wizard.addPage(createPage1());</span><br><span class="line">    wizard.addPage(createPage2());</span><br><span class="line">    wizard.addPage(createPage3());</span><br><span class="line">    wizard.exec();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>运行结果：<br><img src="/image/guid1.png" alt="向导1"></p>
<p><img src="/image/guid2.png" alt="向导2"></p>
<p><img src="/image/guid3.png" alt="向导3"></p>
<h4 id="其他窗口部件"><a href="#其他窗口部件" class="headerlink" title="其他窗口部件"></a>其他窗口部件</h4><h5 id="QFrame类"><a href="#QFrame类" class="headerlink" title="QFrame类"></a>QFrame类</h5><p>  QFrame类是带有边框的部件的基类。它的子类包括最常用的标签部件QLabel,另外还有QLCDNumber、QSplitter、QStackedWidget, QToolBox和QAbstractScrol-lArea类。QAbstractScrollArea类是所有带有滚动区域的部件类的抽象基类,这里需要说明,Qt中凡是带有Abstract 字样的类都是抽象基类。抽象基类是不能直接使用的,但是可以继承该类实现自己的类,或者使用它提供的子类。</p>
<p>QFrame边框形状和阴影<br><img src="/image/qframe_shape.png" alt="边框形状和阴影"><br><img src="/image/qframe_result.png" alt="QFrame类边框效果"></p>
<p>新建Qt Widgets应用，项目名称为mydialog5，继承QWidget.<br>在Qt设计器中从部件列表里拖入一个Frame到界面上,然后在右下方的属性栏中更改其frameShape为Box, frameShadow为Sunken , lineWidth为5,midLineWidth为10。在属性栏中设置部件的属性,这和在源码中用代码实现是等效的,其实也可以直接在mywidget.cpp文件中的MyWidget构造函数里使用代码。</p>
<h6 id="QLabel"><a href="#QLabel" class="headerlink" title="QLabel"></a>QLabel</h6><p>   标签QLabel部件用来显示<strong>文本</strong>或者<strong>图片</strong>。在设计器中向界面拖人一个Label,然后将其拖大点，并在属性栏中设置对其方式alignment的属性,水平的改为AlignH-Center ,垂直的改为AlignVCenter,这样QLabel中的文本就会在正中间显示。font 属性可以对字体进行设置,也可以通过代码进行设置,下面打开mywidget. cpp文件,在构造函数中添加如下代码:</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置字体样式</span></span><br><span class="line">   QFont font;</span><br><span class="line">   font.setFamily(<span class="string">"华文行楷"</span>);</span><br><span class="line">   font.setPointSize(<span class="number">20</span>);</span><br><span class="line">   font.setBold(<span class="literal">true</span>);</span><br><span class="line">   font.setItalic(<span class="literal">true</span>);</span><br><span class="line">   ui-&gt;label-&gt;setFont(font);</span><br></pre></td></tr></table></figure>
<p>QLabel属性栏中的wordWrap属性可以实现文本的自动换行。<br>QFontMetrics类实现自动省略</p>
<p>继续在构造函数例添加代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//实现文本自动换行</span></span><br><span class="line">    QString <span class="built_in">string</span> = tr(<span class="string">"标题太长，需要进行省略！"</span>);</span><br><span class="line">    <span class="comment">//参数分别是：要省略的文本、省略的模式（就是省略号出现的位置）、文本的长度</span></span><br><span class="line">    QString str=ui-&gt;label-&gt;fontMetrics().elidedText(<span class="built_in">string</span>,Qt::ElideRight,<span class="number">180</span>);</span><br><span class="line">    ui-&gt;label-&gt;setText(str);</span><br></pre></td></tr></table></figure></p>
<p>显示图片：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">	<span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QPixmap&gt;</span></span></span><br><span class="line">	<span class="comment">//标签中添加图片，设计器中scaledContents属性选中可以显示整个图片</span></span><br><span class="line">    ui-&gt;label-&gt;setPixmap(QPixmap(<span class="string">"D:/QT/pig.jpg"</span>));</span><br><span class="line"></span><br><span class="line">	<span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QMovie&gt;</span></span></span><br><span class="line">    <span class="comment">//显示GIF动态图片</span></span><br><span class="line">    QMovie *movie=<span class="keyword">new</span> QMovie(<span class="string">"D:/A/img/cat.gif"</span>);</span><br><span class="line">    ui-&gt;label-&gt;setMovie(movie);</span><br><span class="line">    movie-&gt;start();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h6 id="QLCDNumber"><a href="#QLCDNumber" class="headerlink" title="QLCDNumber"></a>QLCDNumber</h6><p>   QLCDNumber部件可以让数码字符显示类似液晶数字一样的效果。从部件栏中拖入一个LCD Number部件到界面上，然后更改其属性:</p>
<ul>
<li>选中smallDecimalPoint项，这样可以显示小数点;</li>
<li>digitCount的作用是设置显示的数字的个数,设置为7,表示要显示7个数字;</li>
<li>mode选Dec表示显示十进制数值,这里还可以设置显示为十六进制(Hex)、八进制(Oct)和二进制( Bin)数值;</li>
<li>segmentStyle用来设置数码的显示样式,这里提供了3种样式,选择Filled;</li>
<li>value设置为456. 123,这就是要显示的数值;</li>
<li>也可以在代码中使用display()函数来设置要显示的数值。</li>
<li>在QLCDNumber中可以显示的数码有0/O.1.2.3.4.5/S.6.7.8.9/g、负号、小数点、A、B、C、D、E、F、h、H、L、o、P、r、u、U、Y、冒号、度符号(输人时使用单引号来代替)和空格。</li>
</ul>
<h6 id="QStackedWidget"><a href="#QStackedWidget" class="headerlink" title="QStackedWidget"></a>QStackedWidget</h6><p>  QStackedWidget类提供了- -个部件栈,可以有多个界面(称为页面),每个界面可以拥有自己的部件,不过每次只能显示一个界面。这个部件需要使用QComboBox或者QListWidget来选择它的各个页面。</p>
<ol>
<li>在设计模式中向界面上拖入一个List Widget和一个StackedWidget。</li>
<li>在ListWidget.上右击,在弹出的级联菜单中选择“编辑项目”项,然后在“编辑列表窗口部件”对话框中按下左下角的加号添加两项,并更该名称为“第一页”和“第二页”。</li>
<li>然后在Stacked Widget 上拖人一个Label,更改文本为“第一页”,再单击Stacked Widget右上角的小箭头进入下一页,再拖入一个标签,更改文本为“第二页”。</li>
<li>然后再将Stacked Widget 部件的frameShape属性更改为StyledPanel。</li>
<li>最后，在信号和槽设计模式将listWidget 部件的currentRowChanged( )信号和stackedWidget的setCurrentIndex()槽关联。</li>
<li>设置完成后运行程序可以看到，现在可以单击listWidget中的项目来选择stackedWidget的页面了。</li>
</ol>
<h6 id="QToolBox"><a href="#QToolBox" class="headerlink" title="QToolBox"></a>QToolBox</h6><p>   QToolBox类提供了一.列层叠窗口部件,就像常用的聊天工具QQ中的抽屉效果。</p>
<ol>
<li>从部件栏中选择ToolBox拖人到界面上,右击并在弹出的级联菜单中选择“插人页→在当前页之后”项来新插入一页。</li>
<li>然后更改其frameShape属性为Box,更改currentIndex即为第几个”抽屉“,更改其对应cucurrenttItemText分别为“好友”、“黑名单”、“陌生人”、“特别讨厌”、”特别关心“。</li>
</ol>
<p>最后所有的运行结果如图所示：</p>
<p><img src="/image/frame_run.png" alt="QFrame家族运行效果">)</p>
<h5 id="按钮部件"><a href="#按钮部件" class="headerlink" title="按钮部件"></a>按钮部件</h5><p>  QAbstractButton类是按钮部件的抽象基类，提供了按钮的通用功能。它的子类包括复选框QCheckBox、标准按钮QPushButton.单选框按钮QRadioButton和工具按钮QToolButton。</p>
<p>  新建Qt Widgets应用,项目名称mybutton,基类选择QWidget,类名设为MyWidget。完成后在项目文件夹中新建images文件夹,并且放人几张图标图片,供下面编写程序时使用。</p>
<h6 id="QPushButton"><a href="#QPushButton" class="headerlink" title="QPushButton"></a>QPushButton</h6><p>  QPushButton提供- - 个标准按钮。在项目中打开mywidget. ui文件,拖人3个PushButton到界面上.然后将它们的objectName依次更改为pushBtnl、pushBtn2和pushBtn3。下面选中pushBtnl的checkable属性,使得它可以拥有“选中”和“未选中”两种状态;再选中pushBtn2的flat 属性,可以不显示该按钮的边框。然后转到push-Btnl的toggled( bool)信号的槽.更改如下:<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QDebug&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> MyWidget::on_pushBtn1_toggled(<span class="keyword">bool</span> checked)<span class="comment">//按钮是否处于被按下状态</span></span><br><span class="line">&#123;</span><br><span class="line">    qDebug()&lt;&lt;tr(<span class="string">"按钮是否按下："</span>)&lt;&lt;checked;<span class="comment">//按下checked为true,否则为false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>在MyWidget的构造函数里添加代码：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">include&lt;QMenu&gt;</span><br><span class="line"></span><br><span class="line">   ui-&gt;pushBtn1-&gt;setText(tr(<span class="string">"&amp;nihao"</span>)); <span class="comment">//Alt+n为加速键</span></span><br><span class="line">   ui-&gt;pushBtn2-&gt;setText(tr(<span class="string">"帮助(&amp;H)"</span>));</span><br><span class="line">   <span class="comment">//给按钮添加图标</span></span><br><span class="line">   ui-&gt;pushBtn2-&gt;setIcon(QIcon(<span class="string">"D:/QT/03/3-07/mybutton/images/loading7.png"</span>));</span><br><span class="line">   ui-&gt;pushBtn3-&gt;setText(tr(<span class="string">"z&amp;oom"</span>));</span><br><span class="line">   QMenu *menu =<span class="keyword">new</span> QMenu(<span class="keyword">this</span>);</span><br><span class="line">   menu-&gt;addAction(QIcon(<span class="string">"D:/QT/03/3-07/mybutton/images/selected.png"</span>),tr(<span class="string">"放大"</span>));</span><br><span class="line">   ui-&gt;pushBtn3-&gt;setMenu(menu);</span><br></pre></td></tr></table></figure>
<h6 id="QcheckBox、QRadioButton和QGroupBox"><a href="#QcheckBox、QRadioButton和QGroupBox" class="headerlink" title="QcheckBox、QRadioButton和QGroupBox"></a>QcheckBox、QRadioButton和QGroupBox</h6><p>  对于调查表之类的应用,往往提供多个选项供选择,有些是可以选择多项的,有些只能选择其中-一项。复选框QCheckBox类提供了同时选择多项的功能,而QRadioButton提供了只能选择- -项的功能，一般要把-一组按钮放到一个QGroupBox中来管理。</p>
<p>   在设计模式时可往界面上拖人两个Group Box,将它们的标题分别改为“复选框”和“单选框”。然后往复选框中拖人3个Check Box,分别更改显示内容为“跑步”、“踢球”和“游泳”。再往单选框中拖入3个Radio Button,分别更改其显示内容为“很好”、“一般”和“不好”。这里还可以选中CheckBox的tristate属性,让它拥有不改变状态、选中状态和未选中状态3种状态。对于选择按钮后的操作，可以关联它们的state-Changed(&gt;信号和自定义的槽,也可以使用isChecked()函数查看一个按钮是否被选中。除了Group Box,还可以使用QButtonGroup类来管理多个按钮。</p>
<p>运行结果：</p>
<p><img src="/image/button_result.png" alt="按钮部件运行结果"></p>
<h5 id="QLineEdit"><a href="#QLineEdit" class="headerlink" title="QLineEdit"></a>QLineEdit</h5><p>  行编辑器QLineEdit部件是-一个单行的文本编辑器，它允许用户输入和编辑单行的纯文本内容,而且提供了一系列有用的功能，包括撤销与恢复、剪切和拖放等操作。<br>  新建Qt Widgets应用,项目名称mylineedit,基类QWidget,类名MyWidget。在设计模式时可往界面上拖人几个标签和Line Edit,设计界面运行结果所示。然后将4个Line Edit从上到下依次更改其objectName为lineEdit1 JlineEdit2 . lineEdit3和lineEdit4。</p>
<ol>
<li><p>显示模式</p>
<p>行编辑器QLineEdit有4种显示模式(echoMode),可以在echoMode属性中更改它们，分别是:</p>
</li>
</ol>
<ul>
<li>Normal正常显示输人的信息;NoEcho不显示任何输人，这样可以保证不泄露输人的字符位数;</li>
<li>Password显示为密码样式,就是以小黑点或星号之类的字符代替输人的字符;</li>
<li>PasswordEchoOnEdit在编辑时显示正常字符，其他情况下显示为密码样式。</li>
</ul>
<p>这里设置lineEdit1的echoMode为Password.</p>
<ol start="2">
<li><p>输入掩码</p>
<p>QLineEdit提供了输人掩码( inputMask)来限制输入的内容。可以使用一些特殊的字符来设置输入的格式和内容.这些字符中有的起限制作用且必须要输入一一个字符，有的只是起限制作用,但可以不输人字符而是以空格代替。先来看一下这些特殊字符的含义,如下表所列。<br><img src="/image/lineedit_yanma.png" alt="Qlineedit掩码字符"></p>
</li>
</ol>
<p>下面将lineEdit2 的inputMask属性设置为“&gt; AA-90-bb-! aa# H; <em>“,其含义为:</em></p>
<ul>
<li>“&gt;”号表明后面输人的字母自动转为大写;</li>
<li>“AA”表明开始必须输人两个字母,因为有前面的“&gt;”号的作用,所以输人的这两个字母会自动变为大写;</li>
<li>“一”号为分隔符，;直接显示,该位不可输入;</li>
<li>“9”表示必须输人一个数字;“0”表示输入一个数字,或者留;空;</li>
<li>“bb”表示这两位可以留空,或者输人两个二进制字符,即0或1;</li>
<li>“!”表明停止大小写转换，就是在最开始的“&gt;”号不再起作用;</li>
<li>“aa”表示可以留空,或者输人两个字母;</li>
<li>“#”表示将“#”号作为分隔符,因为“#”号在这里有特殊含义,所以前面要加上“\”号;</li>
<li>“H”表明必须输入一个十六进制的字符;</li>
<li>“; <em>”表示用 “ </em> ”号来填充空格。</li>
</ul>
<p>另外,也可以使用setInputMask()函数在代码中来设置输人掩码。</p>
<p>在lineEdit2上右击,然后转到它的returnPressed()回车键按下信号的槽中。更改代码如下：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> MyWidget::on_lineEdit2_returnPressed() <span class="comment">//回车键按下信号的槽</span></span><br><span class="line">&#123;</span><br><span class="line">    ui-&gt;lineEdit3-&gt;setFocus();              <span class="comment">//让lineEdit3获得焦点</span></span><br><span class="line">    qDebug()&lt;&lt;ui-&gt;lineEdit2-&gt;text();        <span class="comment">//输入lineEdit2的内容</span></span><br><span class="line">    qDebug()&lt;&lt;ui-&gt;lineEdit2-&gt;displayText(); <span class="comment">//输出lineEdit2显示的内容</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>输入验证</li>
</ol>
<p>在QLineEdit中可以使用验证器（validator）来对输入进行约束<br>在mywidget.cpp的构造函数里添加代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//新建验证器，指定范围为100~999</span></span><br><span class="line">   QValidator *validator=<span class="keyword">new</span> QIntValidator(<span class="number">100</span>,<span class="number">999</span>,<span class="keyword">this</span>);</span><br><span class="line">   <span class="comment">//在行编辑器中使用验证器</span></span><br><span class="line">   ui-&gt;lineEdit3-&gt;setValidator(validator);</span><br></pre></td></tr></table></figure></p>
<p>  在代码中为lineEdit3添加了验证器,那么它现在只能输人100~999之间的数字。再进人lineEdit3的回车键按下信号的槽,输出lineEdit3 的内容。然后运行程序会发现,其他的字符无法输入，而输人小于100的数字时,按下回车键也是没有效果的。QValidator中还提供了QDoubleValidator,可以用它来设置浮点数。如果想设置更强大的字符约束.就要使用正则表达式了</p>
<ol start="4">
<li>自动补全</li>
</ol>
<p>QLineEdit提供强大的自动补全功能通过QCompleter类实现<br>在mywidget.cpp的构造函数里添加代码：<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;QCompleter&gt;</span></span></span><br><span class="line"></span><br><span class="line">   QStringList wordList;</span><br><span class="line">   <span class="comment">//在行编辑器里输入“Q"，自动出现"QT"和”QT Creator“两个选项</span></span><br><span class="line">   wordList&lt;&lt;<span class="string">"QT"</span>&lt;&lt;<span class="string">"QT Creator"</span>&lt;&lt;tr(<span class="string">"你好"</span>);</span><br><span class="line">   QCompleter *completer=<span class="keyword">new</span> QCompleter(wordList,<span class="keyword">this</span>); <span class="comment">//新建自动完成器</span></span><br><span class="line">   completer-&gt;setCaseSensitivity(Qt::CaseInsensitive);  <span class="comment">//设置大小写不敏感</span></span><br><span class="line">   ui-&gt;lineEdit4-&gt;setCompleter(completer);</span><br></pre></td></tr></table></figure></p>
<p>运行结果：<br><img src="/image/lineEdit_result.png" alt="Qlineedit运行结果"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Debugging starts</span><br><span class="line">&quot;AB-12-01- ac#d&quot;</span><br><span class="line">&quot;AB-12-01- ac#d&quot;</span><br><span class="line">&quot;123&quot;</span><br><span class="line">&quot;123&quot;</span><br></pre></td></tr></table></figure>
<h5 id="QAbstractSpinBox"><a href="#QAbstractSpinBox" class="headerlink" title="QAbstractSpinBox"></a>QAbstractSpinBox</h5><p>  QAbstractSpinBox类是-一个抽象基类,提供了一个数值设定框和- 个行编辑器来显示设定值。它有3个子类QDate TimeEdit、QSpinBox和QDoubleSpinBox,分别用来完成日期时间、整数和浮点数的设定。</p>
<p>  新建Qt Widgets 应用,项目名称myspinbox,基类为QWidget,类名MyWidget。</p>
<h6 id="QDateTimeEdit"><a href="#QDateTimeEdit" class="headerlink" title="QDateTimeEdit"></a>QDateTimeEdit</h6><p>  QDateTimeEdit类提供了一个可以编辑日期和时间的部件。到设计模式,从部件栏中分别拖TimeEdit.DateEdit和Date/TimeEdit到界面上,然后设置timeEdit的;displayFormat为“h:mm:ssA” ,这就可以使用12 h制来进行显示。对于dateEdit, 选中它的calendarPopup属性,就可以使用弹出的日历部件来设置日期。然后在MyWid-get类的构造函数中添加代码:<br><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置时间为现在的系统时间</span></span><br><span class="line">  ui-&gt;dateEdit-&gt;setDateTime(QDateTime::currentDateTime());</span><br><span class="line">  <span class="comment">//设置时间的显示格式</span></span><br><span class="line">  ui-&gt;dateTimeEdit-&gt;setDisplayFormat(tr(<span class="string">"yyyy年MM月dd日dddHH时mm分ss秒"</span>));</span><br></pre></td></tr></table></figure></p>
<p> 这里使用代码设置了dateTimeEdit中的日期和时间。简单说明一下:y表示年;M表示月;d表示日;而ddd表示星期;H表示小时,使用24 h制显示,而h也表示小时，如果最后有AM或者PM的,则是12 h制显示,否则使用24 h制;m表示分;s表示秒;还有一个z可以用来表示毫秒。更多的格式可以参考QDateTime类。现在运行程序查看效果。还要说明，可以使用该部件的text()函数获取设置的值,它返回QString类型的字符串;也可以使用dateTime()函数,它返回的是QDateTime类型数据。</p>
<h6 id="QSpinBox-和QDoubleSpinBox"><a href="#QSpinBox-和QDoubleSpinBox" class="headerlink" title="QSpinBox 和QDoubleSpinBox"></a>QSpinBox 和QDoubleSpinBox</h6><p>  QSpinBox用来设置整数, QDoubleSpinBox用来设置浮点数。从部件栏中找到Spin Box和Double Spin Box,并将它们拖入到界面上。可以在属性栏中看到spinBox的属性有:后缀suffix属性,可以设置为“%” ,这样就可以显示百分数了;前缀prefix属性,比如表示金钱时前面有“￥”字符;最小值minimum属性,设置其最小值;最大值maximum属性设置其最大值;单步值singleStep属性设置每次增加的数值,默认为l;value 为现在显示的数值。而doubleSpinBox又增加了一个小数位数decimals属性,用来设置小数点后面的位数。<strong>可以在代码中使用value()函数来获取设置的数值。</strong></p>
<p>运行结果：<br><img src="/image/datetime_result.png" alt="时间日期运行结果"></p>
<h5 id="QAbstractSlider"><a href="#QAbstractSlider" class="headerlink" title="QAbstractSlider"></a>QAbstractSlider</h5><p>  QAbstractSlider类用于提供区间内的一个整数值,它有一个滑块,可以定位到一个整数区间的任意值。该类是一个抽象基类,它有3个子类QSerollBar、QSlider和QDial。其中，滚动条QScrollBar多数是用在QScrollArea类中来实现滚动区域;QSllider就是常见的音量控制或多媒体播放进度等滑块部件;QDial是-一个刻度表盘部件。<br>  新建Qt Widgets应用,项目名称myslider,基类选择QWidget,类名为MyWidget。完成后到设计模式,从部件栏中分别将Dial、Horizontal Scroll Bar和Vertical Scroll Bar、 Horizontal Slider以及Vertical Slider 等部件拖人到界面上。</p>
<ol>
<li>先看两个ScrollBar的属性:</li>
</ol>
<ul>
<li>maximum属性用来设置最大值,minimum属性用来设置最小值;</li>
<li>singleStep属性是每步的步长,默认是1,就是按下方向键后其数值增加或者减少1;</li>
<li>pageStep是每页的步长,默认是10,就是按下PageUp或者PageDown按键后,其数值增加或者减少10;</li>
<li>value与sliderPosition是当前值;</li>
<li>tracking设置是否跟踪,.默认为是,就是在拖动滑块时,每移动一个刻度,都会发射valueChanged()信号，如果选择否,则只有拖动滑块释放时才发射该信号;</li>
<li>orientation设置部件的方向,有水平和垂直两种选择;</li>
<li>invertedAppearance属性设置滑块所在的位置,比如默认滑块开始在最左端，选中这个属性后,滑块默认就会在最右端。</li>
<li>invertedControls设置反向控制,比如默认是向上方向键是增大,向下方向键是减小,如果选中这个属性,那么控制就会正好反过来。</li>
<li>另外,为了使部件可以获得焦点,需要将focusPolicy设置为StrongFocus。</li>
</ul>
<ol start="2">
<li>再来看两个Slider</li>
</ol>
<ul>
<li>它们有了自己的两个属性tickPosition和tickInterval,前者用来设置显示刻度的位置,默认是不显示刻度;后者是设置刻度的间隔。</li>
<li>而Dial有自己的属性wrapping,用来设置是否首尾相连,默认开始与结束是分开的;</li>
<li>属性notchTarget用来设置刻度之间的间隔;</li>
<li><p>属性notchesVisible用来设置是否显示刻度。</p>
<p>再往界面上拖人一个SpinBox,然后进人信号和槽编辑界面,将刻度表盘部件dial的sliderMoved(int)信号分别与其他各个部件的setValue(int)槽相连接。设置完成后运行程序，然后使用鼠标拖动刻度盘部件的滑块,可以看到其他所有的部件都跟着变化了。</p>
<p>运行结果：<br><img src="/image/slider_result.png" alt="滑块部件运行结果"></p>
</li>
</ul>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>你可以对我进行打赏哦</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/weichat.jpg" alt="ananzhusen 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="ananzhusen 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Qt-Creator/" rel="tag"># Qt Creator</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/04/17/Python-MySQL数据库/" rel="next" title="Python_MySQL数据库">
                <i class="fa fa-chevron-left"></i> Python_MySQL数据库
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/05/02/QtCreator学习（2）/" rel="prev" title="QtCreator学习（2）">
                QtCreator学习（2） <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">分享到：</span>
<a class="jiathis_button_fav">收藏夹</a>
<a class="jiathis_button_copy">复制网址</a>
<a class="jiathis_button_email">邮件</a>
<a class="jiathis_button_weixin">微信</a>
<a class="jiathis_button_qzone">QQ空间</a>
<a class="jiathis_button_tqq">腾讯微博</a>
<a class="jiathis_button_douban">豆瓣</a>
<a class="jiathis_button_share">一键分享</a>

<a href="http://www.jiathis.com/share?uid=2140465" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config={
  data_track_clickback:true,
  summary:"",
  shortUrl:false,
  hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script>
<!-- JiaThis Button END -->
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/touxiang.JPG" alt="ananzhusen">
            
              <p class="site-author-name" itemprop="name">ananzhusen</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">23</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">13</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">43</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/ananzhusen" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/5817162963" target="_blank" title="weibo">
                      
                        <i class="fa fa-fw fa-weibo"></i>weibo</a>
                  </span>
                
            </div>
          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-block">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                Links
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="https://gitee.com/anzhusen/" title="gitee" target="_blank">gitee</a>
                  </li>
                
              </ul>
            </div>
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#窗口部件"><span class="nav-number">1.</span> <span class="nav-text">窗口部件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#基础窗口部件QWidget"><span class="nav-number">1.1.</span> <span class="nav-text">基础窗口部件QWidget</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#窗口、子部件以及窗口类型"><span class="nav-number">1.1.1.</span> <span class="nav-text">窗口、子部件以及窗口类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#窗口几何布局"><span class="nav-number">1.1.2.</span> <span class="nav-text">窗口几何布局</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#程序调试"><span class="nav-number">1.1.3.</span> <span class="nav-text">程序调试</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#设置断点"><span class="nav-number">1.1.3.1.</span> <span class="nav-text">设置断点</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#使用qDebug-函数"><span class="nav-number">1.1.3.2.</span> <span class="nav-text">使用qDebug()函数</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#对话框QDialog"><span class="nav-number">1.2.</span> <span class="nav-text">对话框QDialog</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#模态和非模态对话框"><span class="nav-number">1.2.1.</span> <span class="nav-text">模态和非模态对话框</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#多窗口切换"><span class="nav-number">1.2.2.</span> <span class="nav-text">多窗口切换</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#信号和槽"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">信号和槽</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#自定义对话框"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">自定义对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#在主界面中使用自定义的对话框"><span class="nav-number">1.2.2.3.</span> <span class="nav-text">在主界面中使用自定义的对话框</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#标准对话框"><span class="nav-number">1.2.3.</span> <span class="nav-text">标准对话框</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#颜色对话框"><span class="nav-number">1.2.3.1.</span> <span class="nav-text">颜色对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#文件对话框"><span class="nav-number">1.2.3.2.</span> <span class="nav-text">文件对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#字体对话框"><span class="nav-number">1.2.3.3.</span> <span class="nav-text">字体对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#输入对话框"><span class="nav-number">1.2.3.4.</span> <span class="nav-text">输入对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#消息对话框"><span class="nav-number">1.2.3.5.</span> <span class="nav-text">消息对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#进度条对话框"><span class="nav-number">1.2.3.6.</span> <span class="nav-text">进度条对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#错误信息对话框"><span class="nav-number">1.2.3.7.</span> <span class="nav-text">错误信息对话框</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#向导对话框"><span class="nav-number">1.2.3.8.</span> <span class="nav-text">向导对话框</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#其他窗口部件"><span class="nav-number">1.3.</span> <span class="nav-text">其他窗口部件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#QFrame类"><span class="nav-number">1.3.1.</span> <span class="nav-text">QFrame类</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#QLabel"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">QLabel</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#QLCDNumber"><span class="nav-number">1.3.1.2.</span> <span class="nav-text">QLCDNumber</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#QStackedWidget"><span class="nav-number">1.3.1.3.</span> <span class="nav-text">QStackedWidget</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#QToolBox"><span class="nav-number">1.3.1.4.</span> <span class="nav-text">QToolBox</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#按钮部件"><span class="nav-number">1.3.2.</span> <span class="nav-text">按钮部件</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#QPushButton"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">QPushButton</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#QcheckBox、QRadioButton和QGroupBox"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">QcheckBox、QRadioButton和QGroupBox</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#QLineEdit"><span class="nav-number">1.3.3.</span> <span class="nav-text">QLineEdit</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#QAbstractSpinBox"><span class="nav-number">1.3.4.</span> <span class="nav-text">QAbstractSpinBox</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#QDateTimeEdit"><span class="nav-number">1.3.4.1.</span> <span class="nav-text">QDateTimeEdit</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#QSpinBox-和QDoubleSpinBox"><span class="nav-number">1.3.4.2.</span> <span class="nav-text">QSpinBox 和QDoubleSpinBox</span></a></li></ol></li><li class="nav-item nav-level-5"><a class="nav-link" href="#QAbstractSlider"><span class="nav-number">1.3.5.</span> <span class="nav-text">QAbstractSlider</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">ananzhusen</span>

  
</div>

<!-- 
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>
 -->



        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      本站访客数 <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      本站访问总量 <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      次
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: 'e69lyQSoCtoaLGljT3kXLBEQ-gzGzoHsz',
        appKey: 'pRDcFfyQnO4jQWxElUFupJ2D',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  
  

  

  

  


  
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"></canvas> 
   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
   <script type="text/javascript" src="/js/src/fireworks.js"></script>
  

</body>
</html>
